<script setup>
import { ref, onMounted } from 'vue'
import { articleStrategy } from '@/api/article'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const articles = ref([])
const loading = ref(false)

const loadArticles = async () => {
  try {
    loading.value = true
    const res = await articleStrategy()
    articles.value = res.data.list
  } catch (error) {
    showToast('加载失败')
  } finally {
    loading.value = false
  }
}

const goToDetail = (id) => {
  router.push(`/article/${id}`)
}

onMounted(() => {
  loadArticles()
})
</script>

<template>
  <div class="notes-page">
    <div class="header-section">
      <van-nav-bar title="精选游记" left-arrow @click-left="$router.back()">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>

    <div class="content-section" v-if="!loading">
      <div class="featured-article" v-if="articles[0]" @click="goToDetail(articles[0].id)">
        <img :src="articles[0].imagesList[0]" class="featured-image" />
        <div class="featured-info">
          <span class="featured-tag">精选</span>
          <h3>{{ articles[0].title }}</h3>
          <div class="author-info">
            <img :src="articles[0].userInfo.avatar" class="author-avatar" />
            <span>{{ articles[0].userInfo.username }}</span>
          </div>
        </div>
      </div>

      <div class="articles-grid">
        <div 
          v-for="article in articles.slice(1)" 
          :key="article.id"
          class="article-card"
          @click="goToDetail(article.id)"
        >
          <div class="image-wrapper">
            <img :src="article.imagesList[0]" />
            <div class="article-tags">
              <span v-for="tag in article.tagList" :key="tag">{{ tag }}</span>
            </div>
          </div>
          <div class="article-info">
            <h4>{{ article.title }}</h4>
            <p class="preview-text">{{ article.content.slice(0, 50) }}...</p>
            <div class="stats">
              <span><van-icon name="eye-o" /> {{ article.view }}</span>
              <span><van-icon name="like-o" /> {{ article.liked }}</span>
              <span><van-icon name="star-o" /> {{ article.favorite }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-skeleton title avatar :row="3" :loading="loading" v-else />
  </div>
</template>

<style scoped lang="scss">
.notes-page {
  min-height: 100vh;
  background: #f8f8f8;

  .header-section {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    
    .category-tabs {
      display: flex;
      padding: 12px;
      overflow-x: auto;
      gap: 16px;
      
      .category-item {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 14px;
        transition: all 0.3s;
        white-space: nowrap;
        
        &.active {
          background: #ff6b6b;
          color: #fff;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);
        }
      }
    }
  }

  .content-section {
    padding: 16px;

    .featured-article {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 24px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      transform: translateY(0);
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-4px);
      }

      .featured-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }

      .featured-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        color: #fff;

        .featured-tag {
          background: #ff6b6b;
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 12px;
          margin-bottom: 8px;
          display: inline-block;
        }

        h3 {
          margin: 8px 0;
          font-size: 18px;
        }

        .author-info {
          display: flex;
          align-items: center;
          gap: 8px;

          .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #fff;
          }
        }
      }
    }

    .articles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;

      .article-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
          transform: translateY(-4px) scale(1.02);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .image-wrapper {
          position: relative;
          height: 160px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .article-tags {
            position: absolute;
            bottom: 8px;
            left: 8px;
            display: flex;
            gap: 8px;

            span {
              background: rgba(255, 255, 255, 0.9);
              padding: 4px 8px;
              border-radius: 8px;
              font-size: 12px;
              color: #666;
            }
          }
        }

        .article-info {
          padding: 16px;

          h4 {
            margin: 0 0 8px;
            font-size: 16px;
            color: #333;
          }

          .preview-text {
            color: #666;
            font-size: 14px;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .stats {
            display: flex;
            gap: 16px;
            color: #999;
            font-size: 12px;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

@for $i from 1 through 20 {
  .article-card:nth-child(#{$i}) {
    animation-delay: #{$i * 0.1}s;
  }
}
</style>